<template>
	<view>
		<view class="nav_box flex-box">
			<view class="flex-grow-1" :class="{'active': tabIdx==0}" @click="tabClick(0)">全部</view>
			<!-- <view class="flex-grow-1" :class="{'active': tabIdx==1}" @click="tabClick(1)">待签约<text>3</text></view> -->
			<view class="flex-grow-1" :class="{'active': tabIdx==1}" @click="tabClick(1)">待签约</view>
			<view class="flex-grow-1" :class="{'active': tabIdx==2}" @click="tabClick(2)">签约中</view>
			<view class="flex-grow-1" :class="{'active': tabIdx==3}" @click="tabClick(3)">待支付</view>
			<view class="flex-grow-1" :class="{'active': tabIdx==4}" @click="tabClick(4)">已成交</view>
			<view class="flex-grow-1" :class="{'active': tabIdx==-1}" @click="tabClick(-1)">取消</view>
		</view>
		<view class="container pb40">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" top="100rpx" :up="upOption">
				<!-- 房源列表 -->
				<view class="source_list">
					<!-- 待签约 -->
					<view class="order_item" v-for="(item,index) in orderLists" @click="detail(item.id)">
						<view class="flex-box flex-between pt30">
							<view class="col89">订单号 <text class="col3 pl10">{{item.order_no}}</text></view>
							<view :class="(item.checkinfo==2||item.checkinfo==3?'status1':(item.checkinfo==0||item.checkinfo==1?'status2':(item.checkinfo==4?'status3':'status4')))">{{item.checkinfo_text}}</view>
						</view>
						<view class="source_item flex-box ptb25">
							<image :src="item.rental.image" mode="aspectFill"></image>
							<view class="flex-grow-1">
								<view class="m-ellipsis fs30 col10 mb15">{{item.rental.name}}</view>
								<view class="area-size col89 fs24 pb15">
									<text>{{item.rental.prov}} | {{item.rental.region}}</text>
									<text>{{item.rental.space}}㎡</text>
								</view>
								<view class="flex-box" v-if="item.rental.house_tag_text_arr.length>0">
									<view class="targets" v-for="tag in item.rental.house_tag_text_arr">{{tag}}</view>
								</view>
								<view class="price">¥<text>{{item.rental.price}}</text>/月</view>
							</view>
						</view>
						<view class="flex-box">
							<view class="fs24 col89 flex-grow-1">合计：<text class="red fs20">¥</text><text class="red fs30">{{item.renter_pay_money}}</text></view>
							<view class="btn1" v-if="item.checkinfo>0 && item.checkinfo!=4" @click.stop="cancel(index)">取消签约</view>
							<view class="btn2" v-if="item.checkinfo==1 || item.checkinfo == 2" @click.stop="signContract(item.id)">立即签约</view>
							<view class="btn3" v-if="item.checkinfo==0 || item.checkinfo==3 || item.checkinfo==4" @click.stop="lookImage(index)">查看合同</view>
							<view class="btn2" v-if="item.checkinfo==3 || (item.checkinfo==0 && item.pay_status==0)" @click.stop="pay(item.id)">立即支付</view>
						</view>
					</view>
					</view>
				<mescroll-empty v-if="orderLists.length<=0"></mescroll-empty>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const core = require('@/xilu/core.js');
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabIdx: 0,
				q:'',
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:true, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/images/none-data.png',
						tip: '暂无内容' 
					}
				},
				orderLists:[],
			};
		},
		onLoad(options) {
			this.tabIdx = options.state || 0;
		},
		methods: {
			tabClick(i) {
				this.tabIdx = i;
				this.mescroll.resetUpScroll();
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			},
			upCallback(page){
				let that = this;
				let tabIdx = that.tabIdx;
				
				let q = that.q;
				let postData = {
					page: page.num, // 页码, 默认从1开始
					pagesize: page.size, // 每页数据条数
					state: tabIdx,
					q:q
				};
				//联网加载数据
				core.get({url:"api/xiluhouse.rental_order/lists",data:postData,success:(ret)=>{
					 if(page.num == 1) that.orderLists = []; //如果是第一页需手动制空列表
					 that.orderLists = that.orderLists.concat(ret.data.data); //追加新数据
					 //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					 that.mescroll.endSuccess(ret.data.data.length);
				},loading:false});
			},
			 //预览合同
			lookImage(index) {
				let orderRow = this.orderLists[index];
				if (orderRow.checkinfo == 1 || orderRow.checkinfo == 3) {
				 var url = orderRow.lessor_concat_image;
				} else if (orderRow.checkinfo == 4) {
				 var url = orderRow.order_contract_image;
				} 
				uni.downloadFile({
				 url: url,
				 success: function(res) {
				  var filePath = res.tempFilePath;
				  uni.openDocument({
				   filePath: filePath,
				   success: function(res) {
					console.log("打开文档成功");
				   },
				  });
				 },
				});
			},
			
			//取消
			cancel(index){
				let that = this;
				let orderList = that.orderLists;
				let order_id = orderList[index].id;
				//联网加载数据
				uni.showModal({
					title: "提示",
					content: "确认取消？",
					success(res) {
						if(res.confirm){
							core.post({url:'/api/xiluhouse.rental_order/cancel',data:{rental_order_id:order_id},success:(ret)=>{
								 that.downCallback();
							},loading:true});
						}
					}
				})
				
			},
			//发起签约
			signContract(id){
				uni.navigateTo({
					url: '/pages/rental/sign_now/sign_now?rental_order_id='+id
				})
			},
			//立即支付
			pay(id){
				uni.navigateTo({
					url: '/pages/rental/sign_name/sign_name?rental_order_id='+id
				})
			},
			//详情
			detail(id){
				uni.navigateTo({
					url: '/pages/rental/order_detail/order_detail?rental_order_id='+id
				})
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.nav_box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 10;
		font-size: 30rpx;
		color: #898989;
		text-align: center;
		line-height: 100rpx;

		view {
			position: relative;

			text {
				position: absolute;
				right: 2rpx;
				top: 18rpx;
				display: block;
				width: 24rpx;
				height: 24rpx;
				background: #FF3B45;
				border-radius: 50%;
				font-size: 18rpx;
				color: #FFFFFF;
				line-height: 24rpx;
				text-align: center;
			}
		}

		view.active {
			font-size: 36rpx;
			color: #101010;
			font-weight: bold;
			position: relative;
		}

		view.active::after {
			content: "";
			display: block;
			width: 20rpx;
			height: 4rpx;
			background: var(--normal);
			border-radius: 3rpx;
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
		}

	}

	.source_list {
		position: relative;
		z-index: 1;

		.order_item {
			padding: 0 30rpx 30rpx;
			border-bottom: 15rpx solid #F7F9FC;

			.source_item {
				line-height: 1.3;

				image {
					display: block;
					width: 240rpx;
					height: 190rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.area-size {
					text+text {
						margin-left: 40rpx;
					}
				}

				.targets {
					padding: 2rpx 4rpx;
					background: #cce9ff;
					font-size: var(--fs18);
					color: var(--normal);
					border-radius: 2rpx;
					margin-right: 10rpx;
					margin-bottom: 12rpx;
				}

				.price {
					color: var(--red);
					font-size: 24rpx;

					text {
						font-size: 34rpx;
					}
				}
			}
			
			
		}


		.status1 {
			color: #FF3B45;
		}

		.status2 {
			color: var(--normal);
		}

		.status3 {
			color: #101010;
		}

		.status4 {
			color: #898989;
		}

		.btn1 {
			width: 150rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 30rpx;
			border: 1px solid #CCCCCC;
			color: #898989;
			font-size: 24rpx;
			background-color: #fff;
			margin-left: 10rpx;
		}

		.btn2 {
			width: 150rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 30rpx;
			border: 1px solid var(--normal);
			background-color: var(--normal);
			color: #fff;
			font-size: 24rpx;
			margin-left: 10rpx;
		}

		.btn3 {
			width: 150rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 30rpx;
			border: 1px solid var(--normal);
			color: var(--normal);
			font-size: 24rpx;
			margin-left: 10rpx;
		}

		.avatar {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}

		.tel {
			padding: 0;
			margin: 0;
			line-height: 1;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 15rpx;
			}
		}


	}
</style>
